<template>
  <div class="goodesmodelbox">
    <el-dialog
      :showClose="false"
      title="商品详情"
      :visible.sync="centerDialogVisible"
      height="100%"
      top
      width="100%"
      :fullscreen="true"
    >
      <div>
        <el-input
          v-model="goodsName"
          :style="{ width: '260px', marginLeft: '20px' }"
          placeholder="商品名称"
          clearable
          @clear="clearHandle"
        ></el-input>
        <el-select
          v-model="status"
          :style="{ width: '160px', marginLeft: '20px' }"
          clearable
          filterable
          placeholder="商品状态"
          @clear="ClearCategory"
        >
          <el-option
            v-for="(item, i) in goodsStatusList"
            :key="i"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          :style="{ marginLeft: '20px' }"
          circle
          icon="el-icon-search"
          @click="handleSearch"
        ></el-button>
      </div>
      <div class="choosediv">
        <el-button class="shuxin" round size="mini" @click="RefreshHandle"
          >刷新
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        :cell-style="{ 'text-align': 'center' }"
        :data="goodsList"
        :header-cell-style="{ 'text-align': 'center' }"
        border
        style="width: 100%"
      >
        <el-table-column fixed label="排序" prop="sort" width="70">
          <template slot-scope="scope">
            <div class="flex-container">
              <span class="flex-item">
                <!-- 序号 -->
                {{ scope.$index + 1 }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="goodsName"> </el-table-column>
        <el-table-column label="店铺名称" prop="mallName"> </el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            {{ getStatusText(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="400">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="goodsDetailHandle(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 40]"
          layout="sizes,total, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelgoodesmodel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  StatisticInfo,
  ActiveGoods,
} from "@/api/mallApi/managementend/marketing";

export default {
  name: "GoodsDeatils",
  components: {},
  props: {
    centerDialogVisible: Boolean,
    currentRow: Object,
  },
  data() {
    return {
      status: null,
      goodsName: "",
      loading: false,
      goodsList: [],
      currentPage: 1, // 分页
      total: 0,
      pageSize: 10,
      centerDialogVisible2: false,
      enterType2: 0,
      mallName: "",
      goodsStatusList: [
        { name: "待审核", value: 1 },
        { name: "通过", value: 2 },
        { name: "拒绝", value: 3 },
      ],
    };
  },
  methods: {
    ClearCategory() {
      this.RefreshHandle();
    }, // 清空 商品分类
    getStatusText(Status) {
      switch (Status) {
        case "1":
          return "待审核";
        case "2":
          return "通过";
        case "3":
          return "拒绝";
        default:
          return "未知";
      }
    },
    goodsDetailHandle(row) {},
    clearHandle() {
      this.getGoodsListHandle();
    },
    RefreshHandle() {
      this.getGoodsListHandle();
    },
    handleSearch() {
      this.currentPage = 1;
      this.getGoodsListHandle();
    },
    saveActiveHandle() {},
    cancelgoodesmodel() {
      this.$emit("cancelgoodesmodel", false);
    }, // 取消按钮 传值
    getGoodsListHandle() {
      this.loading = true;
      const params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        activeId: this.currentRow.id,
        goodsName: this.goodsName,
        // mallName: this.mallName,
        status: this.status,
      };
      ActiveGoods(params)
        .then((res) => {
          if (res.code !== "00000") return;
          this.goodsList = res.data.rows;
          this.total = parseInt(res.data.totalRows);
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGoodsListHandle();
    },
    handleCurrentChange(val) {
      // 分页
      this.currentPage = val;
      this.getGoodsListHandle();
    },
  },
  mounted() {},
  created() {
    this.getGoodsListHandle();
    console.log(this.currentRow);
  },
  watch: {
    centerDialogVisible(newVal) {
      // 监听 centerDialogVisible 的变化
      if (!newVal) {
        // 当 centerDialogVisible 变为 false 时触发事件
        this.$emit("close-dialog");
      }
    },
  },
};
</script>

<style lang="scss">
.goodesmodelbox {
  .choosediv {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    > div:nth-child(1) {
      width: 1200px;
      font-size: 16px;
      margin-left: 20px;
      margin-bottom: 10px;
      margin-top: 10px;
      background-color: #ecf5ff;
      border-color: #d9ecff;
      display: inline-block;
      height: 32px;
      padding: 0 10px;
      line-height: 30px;
      color: #409eff;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      box-sizing: border-box;
      white-space: nowrap;
      letter-spacing: 10px;
    }
    .shuxin {
      position: absolute;
      right: 20px;
    }
  }
  .paging {
    width: 100%;
    height: 50px;
    // background-color: antiquewhite;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
